<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-12-01 17:10:19
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`">
        <el-row v-if="!getTextModel" :class="{ 'placeholder-error-tip': error }">
            <el-col :span="12" style="border: 0">
                <el-input
                    v-model.trim="val1"
                    type="number"
                    :placeholder="error || ''"
                    :clearable="true"
                    :disabled="getDisabled"
                    oninput="if(value.length > 3) value = value.slice(0, 3)"
                    @keydown.native="onKeydown($event)"
                    @blur="onBlur"
                >
                    <template slot="prepend">K</template>
                </el-input>
            </el-col>
            <el-col :span="12" style="border: 0">
                <el-input
                    v-model.trim="val2"
                    type="number"
                    :placeholder="error || ''"
                    :clearable="true"
                    oninput="if(value.length > 3) value = value.slice(0, 3)"
                    :disabled="getDisabled"
                    @keydown.native="onKeydown($event)"
                >
                    <template slot="prepend">+</template>
                </el-input>
            </el-col>
        </el-row>
        <div v-else :style="item.textStyle || {}" class="form-input-text">
            {{ textModelValue || '' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'
// value必须在配置的data里加上默认值
export default {
    name: 'FormStake',
    mixins: [FormMixin],
    data() {
        return {}
    },
    computed: {
        textModelValue() {
            if (Array.isArray(this.value)) {
                if (this.value[0] && this.value[1]) {
                    return `K${this.value[0]}+${this.value[1]}`
                } else {
                    return ''
                }
            }
            return this.value
        },
        val1: {
            get() {
                return this.value[0]
            },
            set(v) {
                const arr = [v, this.value[1]]
                this.$emit('input', arr)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: arr
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        },
        val2: {
            get() {
                return this.value[1]
            },
            set(v) {
                console.log(v)
                const arr = [this.value[0], v]
                this.$emit('input', arr)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: arr
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        }
    },
    methods: {
        // 在中文输入法下输入英文key是Process
        onKeydown(e) {
            console.log(e.key)
            const arr = ['e', 'E', '-', 'Minus', 'Process']
            if (arr.includes(e.key)) {
                e.preventDefault()
            }
        },
        onBlur() {
            if (this.val[0] === '' || this.val[0] === undefined || this.val[0] === null) {
                return
            }
            const value = this.val[0].toString()
            if (value === '000' || value === '00' || value === '0') {
                this.$set(this.val, 0, '0')
            } else {
                const value = this.val[0].replace(/\b(0+)/gi, '')
                this.$set(this.val, 0, value)
            }
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner, .el-input {
    min-width: 90px !important;
    line-height: 1;
}
</style>
